<template>
	<page  ref='page'>
		<!-- 订单详情 wwl-->
		<view class="page"> 
			<view class="huitiao" ></view>
			<view class="role_info" v-if="info && info.order">
				<view class="status" v-if='info.order.status'>
					{{statusList.find(c=>c.id == info.order.status).text}}
				</view>
				<view class="name">
					<text>{{info.user.name}}</text>
					<text>{{info.user.phone}}</text>
				</view>
				<view class="address">
					{{info.user.address}}
				</view>
			</view>
			<view class="huitiao" ></view>
			<view class="info_list" v-if="info && info.shop && info.shop.goods">
				<view class="info_row">
					<view class="shop" @click="onshop(info.shop)">
						<image :src="info.shop.avatar" mode="scaleToFill" v-if="info.shop.avatar != null"></image>
						<image src="https://xiaoqu.wuguoxin.vip/uploads/web/shop.png" mode="scaleToFill" v-else></image>
						<view class="name">
							{{info.shop.shopping_name}}
						</view>
						<n-icon name="right" class="icon" size="32" color="#111" v-if="info.shop.shopping_type != 0"></n-icon>
					</view>
					<view class="commodity_box" v-for='(c,ci) in info.shop.goods' :key='ci' @click="onDetails(c,info.shop)">
						<view class="left">
							<image :src="c.goods_cover" mode="scaleToFill"></image>
						</view>
						<view class="right">
							<view class="right_left">
								<view class="name">
									{{c.goods_name}}
								</view>
								<view class="label">
									{{c.goods_sku}}
								</view>
							</view>
							<view class="right_right">
								<view class="money">
									¥ {{c.amount}}
								</view>
								<view class="num">
									¥ {{c.amount_one}}
								</view>
								<view class="num">
									x {{c.count}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="info_box"  v-if="info && info.goods">
				<view class="row">
					<view class="left">商品总价：</view>
					<view class="right">¥ {{info.goods.amount}}</view>
				</view>
				<view class="row" v-if="info.goods.yf > 0">
					<view class="left">运费：</view>
					<view class="right">¥ {{info.goods.yf}}</view>
				</view>
				<view class="row" v-if="info.goods.zxj">
					<view class="left">装修金免减：</view>
					<view class="right">-¥ {{info.goods.zxj}}</view>
				</view>
				<view class="row" v-if="info.goods.sfjl">
					<view class="left">三方监理：</view>
					<view class="right">-¥ {{info.goods.sfjl}}</view>
				</view>
				<view class="row row2">
					<view class="left">实付款：</view>
					<view class="right">¥ {{info.goods.sfk}}</view>
				</view>
			</view>
			<view class="order_box" v-if="info && info.order">
				<view class="name">订单信息</view>
				<view class="row">订单编号：{{info.order.out_trade_no}}</view>
				<view class="row">创建时间：{{info.order.created_at}}</view>
				<view class="row" v-if='info.order.pay_time'>付款时间：{{info.order.pay_time}}</view>
			</view>
			
			<view class="button_box">
				<button class="btn" @click.stop='cancellationOrder(info.order.id)' v-if="info.order.status == 1"  :loading="operationLoading && operationType =='pay' && operationId == info.order.id">取消支付</button>
				<button class="btn btn1" @click.stop='onPay(null,info.order.id)' v-if="info.order.status == 1"  :loading="operationLoading && operationType =='pay' && operationId == info.order.id">支付</button>
				<button class="btn" @click.stop='onComment(info.order)' v-if="info.order.status == 5">发表评论</button>
				<!-- <button class="btn" :loading="operationLoading && operationType =='addCart'  && operationId == row.id" @click.stop="onAddCart(row,i)"  v-if="row.status > 3">加入精算单</button> -->
				<button class="btn" @click.stop="orderTracking(info.order)" v-if="info.order.status == 4 || info.order.status == 5 ">查看物流</button>
				<button class="btn btn1" :loading="operationLoading && operationType =='confirmReceipt'  && operationId == info.order.id"  @click.stop="onConfirmReceipt(info.order.id)"  v-if="info.order.status == 4 || info.order.status == 3">确认收货</button>
				
				<button class="btn btn1" :loading="operationLoading && operationType =='Confirmtuikuan'  && operationId == info.order.id"  @click.stop="onConfirmtuikuan(info.order.id)"  v-if="info.order.status == 4 || info.order.status == 3">申请退款</button>
			</view>
			
			<!-- <view class="info_list" v-if='recommend.total > 0'>
				<view class="title">
					<text></text>
					<text>猜你喜欢</text>
					<text></text>
				</view>
				<renovation-row :list='recommend.list' :page='recommend.page' :size='recommend.size'  status='stop' :type='this.info.shop.goods[0].type  | typeRow'/>
			</view> -->
			
			<u-popup v-model="payObj.visible" mode='bottom'  height="auto"  :borderRadius='30' >
				<view class="pay_pop">
					<view class="icon" @click="payObj.visible = false">
						<n-icon name="close" size="44"  color='#A7Abba'></n-icon>
					</view>
					<view class="row"  @click="onPay(2)" >
						<image src="https://xiaoqu.wuguoxin.vip/uploads/web/weixin01.png" mode="scaleToFill"></image>
						<text>微信</text>
					</view>
					<!-- <view class="row" @click="onPay(1)">
						<image src="https://xiaoqu.wuguoxin.vip/uploads/web/zhifubao01.png" mode="scaleToFill"></image>
						<text>支付宝</text>
					</view> -->
				</view>
			</u-popup>
			
		</view>
	</page>
</template>

<script>
	import {mapState} from 'vuex'
	import uPopup from '@/components/u-popup.vue'
	import renovationRow from "@/components/renovation-row.vue"
	import { getGuessYouLike } from "@/utils/getRequest.js"
	import { getOrderInfotDetails,getOrderList,setConfirmReceipt,setAddCart,setOrderPay,orderCloseOrder,setConfirmtuikuan } from "../static/api.js"
	export default {
		filters: {
			typeRow(x) {  // this.info.shop.goods[0].type 1 设计师 2 工长 11 其他  否则建材成
				switch (x){
					case 1:
						return 'findDesign'
						break;
					case 2:
						return 'findCraftsman'
						break;	
					case 11:
						return 'caiLike'
						break;
					default:
						return 'buildingMaterialsCity'
						break;
				}
			}
		},
		components: {
			renovationRow,uPopup
		},
		data() {
			return {
				payObj:{
					visible:false,
				},
				statusList: [{
						id: 0,
						name: "全部"
					},
					{
						id: 1,
						name: "待支付",
						text:'待支付'
					},
					{
						id: 2,
						name: "已关闭",
						text:'已关闭'
					},
					{
						id: 3,
						name: "待发货",
						text:'待发货'
					},
					{
						id: 4,
						name: "待验收",
						text:'卖家已发货'
					},
					{
						id:5,
						name: "待评论",
						text:'买家已签收'
					},
					{
						id:6,
						name: "已完成",
						text:'已完成'
					},
					{
						id:7,
						name: "申请退款",
						text:'申请退款'
					}
				],
				id:null,
				info:{},
				recommend:{
					loading:false,
					list:[],
					page:1,
					size:10,
					total:0
				},
				operationLoading:false,
				operationId:null,
				operationType:null,
				pingtai:1,
				goods_id:null
			}
		},
		
		onReachBottom(){
			if(this.recommend.page * this.recommend.size >= this.recommend.total) return
			this.recommend.page ++ 
			this.getRecommend()
		},
		methods: {
			async getInfo(){
				uni.showLoading()
				try{
					var res = await getOrderInfotDetails({id:this.id})
					this.info = res
					this.getRecommend()
					uni.hideLoading()
				}catch{uni.hideLoading()}
				
			},
			async getRecommend(){ 
				this.recommend.loading = true
				var zone_id =  (this.info.shop.goods[0].type !=1 &&  this.info.shop.goods[0].type !=2) ? this.$store.state.currentArea ? this.$store.state.currentArea.cityId : '' :  this.$store.state.addressSelect ? this.$store.state.addressSelect.id : ''
				try{
					var res = await getGuessYouLike({shopping_id:this.info.shop.shopping_id,goods_id:this.info.shop.goods[0].goods_id,page:this.recommend.page,limit:this.recommend.size,zone_id,type:this.info.shop.goods[0].type == 2 ? 1 : ''})
					this.recommend.list  =  this.recommend.page == 1 ? res.list : [...this.recommend.list,...res.list]
					this.recommend.total = res.count
					this.recommend.loading = false
				}catch{
					this.recommend.loading = false
				}
			},
			onshop(row) {
				if(row.shopping_type == 1){
					uni.navigateTo({
						url: '/pagesCommodity/shopDetailsDefault?id=' + row.shopping_id + '&type=findCraftsman&name='+ encodeURIComponent(row.shopping_name)
					})
				}else if(row.shopping_type == 2){
					uni.navigateTo({
						url: '/pagesCommodity/shopDetailsDefault?id=' + row.shopping_id + '&type=findDesign&name=' + encodeURIComponent(row.shopping_name)
					})
				}else if(row.shopping_type == 3){
					uni.navigateTo({
						url: '/pagesCommodity/shopDetailsDefault?id=' + row.shopping_id + '&type=buildingMaterialsCity&name=' + encodeURIComponent(row.shopping_name)
					})
				}else if(row.shopping_type == 4){
					uni.navigateTo({
						url: '/pagesCommodity/shopDetailsDefault?id=' + row.shopping_id + '&type=buildingMaterialsCity&name=' + encodeURIComponent(row.shopping_name)
					})
				}else if(row.shopping_type == 5){
					uni.navigateTo({
						url: '/pagesCommodity/shopDetailsDefault?id=' + row.shopping_id + '&type=buildingMaterialsCity&name=' + encodeURIComponent(row.shopping_name)
					})
				}else if(row.shopping_type == 6){
					uni.navigateTo({
						url: '/pagesCommodity/shopDetailsDefault?id=' + row.shopping_id + '&type=buildingMaterialsCity&name=' + encodeURIComponent(row.shopping_name) + '&duihuan=1'
					})
				}else{
					uni.showToast({
						title:'该商品无店铺',icon:'none'
					})
				}
				
				
			},
			onDetails(row,shop) {
				if(shop.shopping_type == 1){
					uni.navigateTo({
						url: '/pagesCommodity/information?id=' + row.goods_id + '&type=findCraftsman'
					})
				}else if(shop.shopping_type == 2){
					uni.navigateTo({
						url: '/pagesCommodity/information?id=' + row.goods_id + '&type=findDesign'
					})
				}else if(shop.shopping_type == 3){
					uni.navigateTo({
						url: '/pagesCommodity/information?id=' + row.goods_id + '&type=buildingMaterialsCity'
					})
				}else if(shop.shopping_type == 4){
					uni.navigateTo({
						url: '/pagesCommodity/information?id=' + row.goods_id + '&type=buildingMaterialsCity'
					})
				}else if(shop.shopping_type == 5){
					uni.navigateTo({
						url: '/pagesCommodity/information?id=' + row.goods_id + '&type=buildingMaterialsCity'
					})
				}else if(shop.shopping_type == 6){
					uni.navigateTo({
						url: '/pagesCommodity/information?id=' + row.goods_id + '&type=buildingMaterialsCity' + '&duihuan=1'
					})
				}else{
					
				}
				
			},
			// 取消订单
			async cancellationOrder(id){
				try{
					var res = await orderCloseOrder({id});
					console.log(res,'取消支付');
					this.operationLoading = false
					this.operationType = null
					this.operationId = null
					// this.$set(this.list[i],'status',1)
					this.getInfo();
				}catch{
					this.operationLoading = false
					this.operationType = null
					this.operationId = null
				}
			},
			async onPay(type,id){
				// console.log(this.operationLoading)
				if(type){
					this.operationLoading = true
					try{
						var result1 = await setOrderPay({pay_type:type,duan_type:1,id:this.operationId,debug:0,pingtai:this.pingtai})
						console.log(result1,'result1')
						uni.requestPayment({
							provider:type == 1 ? 'alipay' : 'wxpay',
							orderInfo:result1,
							success: e => {
								uni.showToast({title:'支付成功'})
								setTimeout(()=>{
									this.getInfo()
								},300)
							},
							fail: e => {
								console.log(JSON.stringify(e),'fail')
								uni.showToast({title:'支付失败',icon:'none'})
							},
							complete: () => {
								this.payObj.visible = false
								this.operationLoading = false
								this.operationType = null
								this.operationId = null
							}
						});
					}catch{
						this.payObj.visible = false
						this.operationLoading = false
						this.operationType = null
						this.operationId = null
					}
					
				}else{
					this.operationId = id
					this.operationType = 'pay'
					if(this.duanType == 1){
						this.payObj.visible = true
					}else{
						try{
							var result = await setOrderPay({pay_type:4,duan_type:2,id:this.operationId,debug:0,pingtai:this.pingtai})
							uni.requestPayment({
								'provider': 'wxpay',
								 ...result,
								success:  (res1) =>{
								  uni.showToast({
									title:'支付成功'
								  })
								setTimeout(()=>{
									
									this.getInfo()
								},300)
								},
								complete: () => {
									this.operationLoading = false
									this.operationType = null
									this.operationId = null
								},
								fail: function (err) {
								 uni.showToast({
									title:'支付失败',icon:'none'
								 })
								}
							});
						}catch{
							this.operationLoading = false
							this.operationType = null
							this.operationId = null
						}
						
					}
				}
			},
			async onAddCart(row){
				if(this.operationLoading) return
				this.operationLoading = true
				this.operationType = 'addCart'
				this.operationId = row.id
				// uni.showToast({title:'暂无接口',icon:'none'})
				try{
					var res = await setAddCart({id:row.id})
					uni.showToast({title:'添加成功',icon:'none'})
					this.operationLoading = false
					this.operationType = null
					this.operationId = null
				}catch{
					this.operationLoading = false
					this.operationType = null
					this.operationId = null
				}
			},
			//确认收货
			onConfirmReceipt(id){
				if(this.operationLoading) return
				uni.showModal({
					title: '提示',
					content: `您确认收货当前商品吗？`,
					success:async (res)=>{
					  if (res.confirm) {
						   this.operationLoading = true
						   this.operationType = 'confirmReceipt'
						   this.operationId = id
						  try{
							var res1  = await setConfirmReceipt({id:id})
							this.operationLoading = false
							this.operationType = null
							this.operationId = null
							this.getInfo()
							// this.$set(this.list[i],'status',5)
						  }catch{
							  this.operationLoading = false
							  this.operationType = null
							  this.operationId = null
						  }
					  }
					}
				})
			},
			//申请退款
			onConfirmtuikuan(id){
				console.log(id,'申请退款')
				if(this.operationLoading) return
				uni.showModal({
					title: '提示',
					content: `您确认申请退款吗？`,
					success:async (res)=>{
					  if (res.confirm) {
						   this.operationLoading = true
						   this.operationType = 'Confirmtuikuan'
						   this.operationId = id
						  try{
							var res1  = await setConfirmtuikuan({id:id})
							if(res1.code == 0){
								uni.showToast({title:res1.msg,icon:'none'})
							}else{
								uni.showToast({title:res1.msg,icon:'none'})
							}
							
							this.operationLoading = false
							this.operationType = null
							this.operationId = null
							this.getInfo()
							// this.$set(this.list[i],'status',5)
						  }catch{
							  this.operationLoading = false
							  this.operationType = null
							  this.operationId = null
						  }
					  }
					}
				})
			},
		},
		computed: {
			...mapState(['duanType'])
		},
		onLoad(params){
			//判断平台
			// #ifdef H5 || MP-WEIXIN
			this.pingtai = 1;
			// #endif
			// #ifdef APP-PLUS
			this.pingtai = 2;
			// #endif
			
			this.id = params.id
			this.goods_id = params.goods_id
			this.getInfo()
		}
	}
</script>

<style lang="scss" scoped>
	.order_box{
		padding: 0 36rpx 30rpx;
		width: 100%;
		box-sizing: border-box;
		margin-top: 60rpx;
		
		.name{
			font-size: 32rpx;
			line-height: 44rpx;
			color:#111;
			margin-bottom: 20rpx;
		}
		.row{
			margin-bottom: 14rpx;
			color:#666666;
			font-size: 24rpx;
			line-height: 34rpx;
		}
	}
	.info_box{
		padding: 0 36rpx 30rpx;
		width: 100%;
		box-sizing: border-box;
		.row{
			margin-top: 16rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left{
				
				font-size: 24rpx;
				line-height: 36rpx;
				color:#666666;
			}
			.right{
				text-align: right;
				width: calc(100% - 6em);
				font-size: 24rpx;
				line-height: 36rpx;
				color:#26252A
			}
		}
		.row2{
			.left{
				font-size: 28rpx;
				line-height: 40rpx;
				color:#26252A
			}
			.right{
				font-size: 28rpx;
				line-height: 40rpx;
				color:#FF7A1F
			}
		}
	}
	.role_info{
		margin: 0 auto;
		padding: 22rpx 30rpx;
		width: 734rpx;
		box-sizing: border-box;
		// border-bottom: 2rpx solid #dddddd;
		.status{
			font-size: 32rpx;
			line-height: 44rpx;
			color:#FF7A1F
		}
		.name{
			margin-top: 26rpx;
			font-size: 32rpx;
			line-height: 44rpx;
			color:#26252A;
			text:nth-child(2){
				margin-left: 20rpx;
			}
		}
		.address{
			margin-top: 8rpx;
			line-height: 40rpx;
			font-size: 28rpx;
			color:#666666
		}
	}
	.info_list{
		padding: 0 36rpx 30rpx;
		width: 100%;
		box-sizing: border-box;
		.title{
			display: flex;
			justify-content: center;
			margin-bottom: 30rpx;
			align-items: center;
			text:nth-child(2){
				font-size: 28rpx;
				line-height: 40rpx;
				color:#A4A4A4;
				margin: 0 20rpx;
			}
			text:nth-child(1){
				background: linear-gradient(60deg, #ffffff 6%, #808080 92%);
			}
			text:nth-child(3){
				background: linear-gradient(60deg, #808080 6%, #ffffff 92%, );
			}
			text:nth-child(1),
			text:nth-child(3){
				width: calc(50% - 4em);
				// background-color: #b9b9b9;
				height: 2rpx;
			}
		}
	}
	.info_row{
		margin-top: 64rpx;
		width: 100%;
		background: #ffffff;
		box-sizing: border-box;
		.shop{
			display: flex;
			align-items: center;
			image{
				width: 40rpx;
				height: 40rpx;
				border-radius: 50px;
			}
			.name{
				max-width: calc(100% - 70rpx);
				font-size: 28rpx;
				line-height: 40rpx;
				color:#111;
				white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis;
				word-break: break-all;
				margin-left: 20rpx;
			}
		}
		.commodity_box{
			margin-top: 54rpx;
			display: flex;
			justify-content:space-between;
			>.left{
				image{
					width: 128rpx;
					height: 128rpx;
				}
			}
			>.right{
				width: calc(100% - 152rpx);
				display: flex;
				justify-content:space-between;
				.right_right{
					width: 200rpx;
					text-align: right;
					.money{
						font-size: 24rpx;
						line-height: 34rpx;
						color:#26252A;
					}
					.num{
						margin-top: 12rpx;
						font-size: 24rpx;
						line-height: 34rpx;
						color:#ADADAD;
					}
				}
				.right_left{
					width: calc(100% - 210rpx);
					height: 128rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.name{
						font-size: 24rpx;
						line-height: 34rpx;
						color:#26252A;
						// height: 80rpx;
						overflow:hidden;
						text-overflow:ellispsis;
						display:-webkit-box;
						-webkit-line-clamp:2;
						-webkit-box-orient:vertical;
					}
					.label{
						max-width: 90%;
						height: 48rpx;
						background: #f6f7fb;
						font-size: 20rpx;
						white-space:nowrap;
						overflow:hidden;
						text-overflow:ellipsis;
						word-break: break-all;
						color:#ADADAD;
						line-height: 48rpx;
						padding: 0 24rpx;
						box-sizing: border-box;
					}
				}
			}
		}
	}
	.huitiao{
		width: 100%;
		    height: 10px;
		    background: #f3f3f3;
	}
	.button_box {
		text-align: right;
		    position: fixed;
		    bottom: 0;
		    right: 0px;
		    width: 100%;
		    padding: 10px 10px;
		    background: #fff;
		    box-shadow: 0 0px 7px 0px #999;
		
		.btn {
				display: inline-block;
				margin-left: 20rpx;
		
				&:first-child {
					margin-left: 0;
				}
		
				width: 162rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: #ffffff;
				border: 2rpx solid #bbbbbb;
				border-radius: 32rpx;
				font-size: 24rpx;
				color:#666666;
		}
		
		.btn1 {
				border: 0rpx solid #ff9e0c;
				// background: #ff9800;
				// color: #fff
				
				color: #f4f4f4!important;
				// background: #393939!important
				background-image: linear-gradient(rgb(255,155,3), rgb(252,183,78))!important;
				box-shadow: 0px 3px 7px 0px #ff9e0c;
		}
	}
	
	.pay_pop{
		border-radius: 30rpx 30rpx 0 0;
		width: 750rpx;
		background-color: #fff;
		height: 400rpx;
		display: flex;
		position: relative;
		.icon{
			position: absolute;
			right: 26rpx;
			top:26rpx;
		}
		.row{
			flex:1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			image{
				width: 74rpx;
				height: 74rpx;
				margin-bottom: 26rpx;
			}
			text{
				font-size: 28rpx;
				height: 44rpx;
				color:#26252A;
			}
		}
	}
</style>
